<template>
    <div class="page">
        <gzg-search :config="searchConfig" :showMore="false" :form="searchForm" :label-width="120"
            @search="search"></gzg-search>
        <div class="grid-wrap">
            <el-table style="width: 100%" height="100%" :border="true" :data="listData.data">
                <el-table-column label="序号" type="index" width="60px" fixed="left"></el-table-column>
                <el-table-column label="提现类型" prop="withdraw_type_desc" width="150px" fixed="left"></el-table-column>
                <el-table-column label="银行账号/支付宝账号" prop="bank_account" min-width="150px"></el-table-column>
                <el-table-column label="银行实名/支付宝实名" prop="real_name" min-width="200px"></el-table-column>
                <el-table-column label="提现金额" prop="amount" min-width="120px"></el-table-column>
                <el-table-column label="状态" prop="withdraw_status_desc" width="120px"></el-table-column>
                <el-table-column label="申请提现时间" prop="create_at" width="180px"></el-table-column>
                <el-table-column label="操作" width="100px" fixed="right">
                    <template #default="props">
                        <div>
                            <el-button type="primary" v-if="props.row.button.view_btn" link
                                @click="view(props.row)">详情</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination v-model:current-page="params.page" v-model:page-size="params.page_size"
                :page-sizes="[100, 200, 300, 400]" layout="total, prev, pager, next" :total="listData.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <el-drawer v-model="show" size="600px" :show-close="false">
            <template #header>
                <div class="drawer-header">
                    <span class="drawer-title">审核详情</span>
                    <el-icon @click="show = false" color="#909399" size="16" style="cursor: pointer">
                        <Close />
                    </el-icon>
                </div>
            </template>
            <div class="pane">
                <div class="title">
                    <div class="text">申请信息</div>
                </div>
                <div class="form">
                    <div class="form-item">
                        <div class="label">提现金额</div>
                        <div class="val">{{  detail.amount  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">收款方式</div>
                        <div class="val">{{  detail.withdraw_type_desc  }}</div>
                    </div>
                    <div class="form-item" v-if="detail.withdraw_type == '2'">
                        <div class="label">收款银行</div>
                        <div class="val">{{  detail.bank_name  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">{{ detail.withdraw_type == '1' ? '支付宝账号' : '银行卡号' }}</div>
                        <div class="val">{{  detail.bank_account  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">{{ detail.withdraw_type == '1' ? '支付宝实名' : '银行户名' }}</div>
                        <div class="val">{{  detail.real_name  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">备注</div>
                        <div class="val">{{  detail.apply_note  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">提现时间</div>
                        <div class="val">{{  detail.create_at  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">申请人</div>
                        <div class="val">{{  detail.apply_name  }}</div>
                    </div>
                </div>
                <div class="title" v-if="detail.verify_at">
                    <div class="text">打款信息</div>
                </div>
                <div class="form" v-if="detail.verify_at">
                    <div class="form-item">
                        <div class="label">打款结果</div>
                        <div class="val">{{  detail.withdraw_status_desc  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">备注</div>
                        <div class="val">{{  detail.verify_reason  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">审核时间</div>
                        <div class="val">{{  detail.verify_at  }}</div>
                    </div>
                    <div class="form-item">
                        <div class="label">操作人</div>
                        <div class="val">{{  detail.verify_user_name  }}</div>
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from "vue";

import { Close } from "@element-plus/icons-vue";


import { getIncomeWithdrawList, getWithdrawDetail } from "services/commission";

import { assign } from "lodash";

const show = ref(false);

const detail = ref({
    id: "", //id
    amount: "", //提现金额
    withdraw_type: "", //提现类型：1支付宝转账 2银行转账
    withdraw_type_desc: "",
    bank_name: "", //银行名称
    real_name: "", //姓名
    bank_account: "", //银行户名
    withdraw_status: "", //提现状态
    withdraw_status_desc: "",
    apply_note: "", //申请备注
    apply_name: "", //申请人
    create_at: "", //创建时间
    verify_at: "", //审核时间
    verify_reason: "", //审核理由
    verify_user_name: "" //审核人
})

const searchForm = reactive({
    withdraw_status: "",
});

const searchConfig = reactive([
    {
        id: "withdraw_status",
        label: "状态",
        placeholder: "请选择状态",
        type: "select",
        enum: "withdraw_status_list",
    },
]);

const listData = reactive({
    total: 0,
    data: <any>[],
});

const params = ref({
    withdraw_status: "",
    page_size: 20,
    page: 1,
});

const search = (searchParams: any) => {
    assign(params.value, searchParams);

    params.value.page = 1;

    getList();
};

const handleSizeChange = (val: number) => {
    params.value.page_size = val;
    params.value.page = 1;
    getList();
};

const handleCurrentChange = (val: number) => {
    params.value.page = val;
    getList();
};

const view = (row: any) => {
    getWithdrawDetail({
        id: row.id,
    }).then((res) => {
        detail.value = res
        show.value = true;
    });
};

const getList = () => {
    getIncomeWithdrawList(params.value).then((res) => {
        listData.total = parseInt(res.total_rows);
        listData.data = res.items || [];
    });
};

onMounted(() => {
    getList();
});
</script>
